<template>
  <div id="container">
    <panelGroup
      @handleSetLineChartData="handleSetLineChartData"
      :panel-data="panelData"
    />
    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <single-line v-if="display == 'quantity'" :chart-data="chartData" />
      <stack-bar v-else-if="display == 'proportion'" :chart-data="chartData" />
    </el-row>
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <rose-pie />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <rose-pie />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <rose-pie />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import RosePie from "@/components/echarts/RosePie.vue";
import panelGroup from "@/components/PanelGroup.vue";
import stackBar from "@/components/echarts/StackBar.vue";
import singleLine from "@/components/echarts/SingleLine.vue";
// import doubleLine from "@/components/echarts/DoubleLine.vue";
import { getArticleOfWeek, articleCategoryCountWeek } from "@/api/dataManage";
/* const proportionChartDatas = {
  data_1: {
    name: "升学",
    data: [
      ["Mon", 11],
      ["Tue", 22],
      ["Wed", 33],
      ["Thu", 14],
      ["Fri", 55],
      ["Sat", 26],
      ["Sun", 77],
    ],
  },
  data_2: {
    name: "考公",
    data: [
      ["Mon", 21],
      ["Tue", 12],
      ["Wed", 53],
      ["Thu", 24],
      ["Fri", 35],
      ["Sat", 46],
      ["Sun", 27],
    ],
  },
  data_3: {
    name: "考证",
    data: [
      ["Mon", 31],
      ["Tue", 12],
      ["Wed", 23],
      ["Thu", 54],
      ["Fri", 25],
      ["Sat", 16],
      ["Sun", 37],
    ],
  },
  data_4: {
    name: "竞赛",
    data: [
      ["Mon", 31],
      ["Tue", 22],
      ["Wed", 13],
      ["Thu", 24],
      ["Fri", 35],
      ["Sat", 26],
      ["Sun", 47],
    ],
  },
}; */
/* const quantityChartData = {
  data: [
    ["Mon", 11],
    ["Tue", 22],
    ["Wed", 33],
    ["Thu", 14],
    ["Fri", 55],
    ["Sat", 26],
    ["Sun", 77],
  ],
};
 */
const panelData = {
  quantity: "数量",
  proportion: "占比",
};

export default {
  name: "ArticleData",
  components: {
    RosePie,
    panelGroup,
    stackBar,
    singleLine,
  },
  data() {
    return {
      // panelData: ["user", "gender"],
      panelData: panelData,
      chartData: [],
      // 数据类目
      categoryList: ["升学", "考公", "考证", "竞赛"],
      // 堆叠图数据
      proportionChartDatas: {},
      quantityChartData: {},
      display: "quantity", // 控制需要显示的数据类型
    };
  },
  created() {
    // 获取过去一周文章投稿数量
    getArticleOfWeek().then((res) => {
      this.quantityChartData = this.formatXAxisForList(res.data);
      this.chartData = this.quantityChartData;
    });
    // 按类目获取过去一周的数据量
    articleCategoryCountWeek(this.categoryList[0]).then((res) => {
      let data_1 = {
        name: this.categoryList[0],
        data: this.formatXAxisForList(res.data),
      };
      this.$set(this.proportionChartDatas, "data_1", data_1);
    });
    articleCategoryCountWeek(this.categoryList[1]).then((res) => {
      let data_2 = {
        name: this.categoryList[1],
        data: this.formatXAxisForList(res.data),
      };
      this.$set(this.proportionChartDatas, "data_2", data_2);
    });
    articleCategoryCountWeek(this.categoryList[2]).then((res) => {
      let data_3 = {
        name: this.categoryList[2],
        data: this.formatXAxisForList(res.data),
      };
      this.$set(this.proportionChartDatas, "data_3", data_3);
    });
    articleCategoryCountWeek(this.categoryList[3]).then((res) => {
      let data_4 = {
        name: this.categoryList[3],
        data: this.formatXAxisForList(res.data),
      };
      this.$set(this.proportionChartDatas, "data_4", data_4);
    });
  },
  methods: {
    // panelGroup选项卡的回调方法
    handleSetLineChartData(panel_item) {
      if (panel_item === "quantity") {
        this.chartData = this.quantityChartData;
        this.display = "quantity";
      } else if (panel_item === "proportion") {
        this.chartData = this.proportionChartDatas;
        this.display = "proportion";
      }
    },
    // 格式化xAxis.data的格式
    formatXAxisForList(data) {
      for (let i = 0; i < data.length; i++) {
        data[i][0] = parseInt(data[i][0]) + "日";
      }
      console.log("++++++++++++>", data);
      return data;
    },
  },
};
</script>

<style scoped>
#container {
  height: 100%;
}
.chart-wrapper {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
}
</style>